<template>

  <div class="container">
    <img src="https://iscreg.oss-cn-shanghai.aliyuncs.com/reed/LWACQ20/images/CQbanner_2.jpg" width="100%">
    <div class="tips margin-20">
      <p>欢迎进入重庆国际交通轻量化展览会专业观众微信预登记页面！</p>
      <div class="list"><strong>根据中国政府新冠防疫要求，所有展会出席人员必须实名制登记。请使用与您身份证明</strong>
        <p><span>✻</span>上完全一致的姓名和本人手机号登记，否则您需要现场重新实名登记后方可进入展馆。感谢您的合作！</p>
        <p><span>✻</span>可以使用的有效身份证明：</p>
        <p><span>◈ </span>中国居民：中国居民身份证、港澳居民往来内地通行证、港澳居民居住证、台湾居民来往大陆通行证、台湾居民居住证</p>
        <p><span>◈ </span>其它国家或地区居民可使用：护照</p>
      </div>
      <!-- <p> 请输入您的信息开始预登记。</p> -->
      <p>*请正确填写您的个人信息，以便展会为您制作入场用胸卡和发送展会信息。</p>
    </div>
    <van-form @submit="onSubmit" ref="form">
      <van-field v-model="surname" :value="surname" name="surname" label="用户名" clearable placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="mobile" :value="mobile"    name="mobile"   label="手机" clearable placeholder="手机" :rules="rules.mobile" />

      <van-field v-model="verify" :value="verify" center clearable label="短信验证码" placeholder="请输入短信验证码" :rules="[{ required: true, message: '请输入短信验证码' }]">
        <template #button>
          <van-button size="small" round class="nostyle" :disabled="num!==60" @click="sendCode">{{sendVal}}</van-button>
        </template>
      </van-field>
      <!-- <div class="margin-20">
        <van-slider class="verificationValue" :disabled="verificationValue==100" :class="verificationValue==100 ? 'ready' : ''" v-model="verificationValue" @change="onChange" />
      </div> -->

      <VerifySwipe class="margin-20 mt20" v-model="verificationValue" />

      <div class="margin-20 mt20"  >
        <van-button :disabled="$store.getters.loadingShow.show" round block native-type="submit">
          下一步
        </van-button>
      </div>
    </van-form>
    <div class="margin-20 mt20 ">©2020重庆国际交通轻量化展览会</div>
    <!-- <div class="loading" v-if="showLoading">
      <van-loading  vertical type="spinner" >加载中...</van-loading>
    </div> -->
     

  </div>

</template>

<script lang="ts">
import Login from "./login";
export default Login;
</script>

<style lang="scss" scoped>
.container {
  font-size: 14px;
  padding-bottom: 20px;
  .list {
    font-size: 13px;
    padding: 10px;
    @include warn-all;
    p {
      margin: 5px 0 0;
      text-indent: -13px;
      padding-left: 16px;
    }
  }

  .mt20 {
    margin-top: 20px;
  
  }
  .verificationValue {
    height: 40px;
    &.ready {
      ::v-deep .van-slider__bar {
        &::before {
          content: "验证通过";
          color: #fff;
        }
      }
    }
    &::after {
      content: "拖动验证滑块";
      position: absolute;
      width: 150px;
      left: 0;
      top: 0;
      transform: translateY(10px);
      right: 0;
      margin: auto;
      text-align: center;

      z-index: 1;
    }
    ::v-deep .van-slider__bar {
      z-index: 2;
      &::before {
        content: "拖动验证滑块";
        position: absolute;
        width: 150px;
        left: 50%;
        transform: translateY(10px);
        right: 0;
        margin: auto;
        text-align: center;
      }
    }
    ::v-deep .van-slider__button-wrapper {
      // transform: translate(20px,-15px);
      margin-right: 10px;

      &[aria-valuenow^="0"] {
        margin: 0px -10px 0px 10px;
      }
      .van-slider__button {
        height: 40px;
        width: 40px;
        &::before {
          content: ">>";
          text-align: center;
          line-height: 40px;
          display: block;
          font-weight: bold;
        }
      }
    }
  }
}
</style>